<template>
  <div class="evaluat-container">
    <!-- 评价上边 -->
    <div class="evaluat-container-top">
      <div class="evaluat-container-top-left">
        <h2>5.0</h2>
        <p>综合评分</p>
        <span>高于周边商家<span>96%</span></span>
      </div>
      <div class="evaluat-container-top-right">
        <p>
          服务态度 <span><van-rate v-model="value" readonly /> 2</span>
        </p>
        <p class="evaluat-container-top-right-margin">
          菜品质量 <span><van-rate v-model="value" readonly /> 2</span>
        </p>
        <p>送达时间 <span>20分钟</span></p>
      </div>
    </div>
    <!-- 评价下边 -->
    <div class="evaluat-container-botton">
      <!-- 下边格式导航 -->
      <div class="evaluat-container-all">
        <van-tabs type="card" color="rgb(178, 13, 31)">
          <van-tab :title="'全部'+evaluatInfo.length">
            <div
              class="card-container"
              v-for="(item, index) in evaluatInfo"
              :key="index"
            >
              <div class="card-container-left">
                <img :src="item.avatar" alt="" />
              </div>
              <div class="card-container-right">
                <p class="card-container-right-first">
                  <span class="card-container-right-name">{{
                    item.username
                  }}</span>
                  <span class="card-container-right-time">{{
                    item.rateTime
                  }}</span>
                </p>
                <p>
                  <span><van-rate v-model="item.score" readonly /></span>
                  <span class="card-container-right-score">{{
                    item.deliveryTime
                  }}</span
                  >分送达
                </p>
                <p class="card-container-right-evaluate">
                  {{ item.text }}
                </p>
                <div class="card-container-right-like">
                  <div>
                    <span
                      ><van-icon name="good-job-o" class="good-job-o"
                    /></span>
                  </div>
                  <div class="like-all-kinds">
                    <span
                      class="like-kinds"
                      v-for="recommend in item.recommend"
                      :key="recommend"
                    >
                      {{ recommend }}
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </van-tab>
          <van-tab :title="'好评'+ goodEvaluat.length">
             <div
              class="card-container"
              v-for="(item,index) in goodEvaluat"
              :key="index"
            >
              <div class="card-container-left">
                <img :src="item.avatar" alt="" />
              </div>
              <div class="card-container-right">
                <p class="card-container-right-first">
                  <span class="card-container-right-name">{{
                    item.username
                  }}</span>
                  <span class="card-container-right-time">{{
                    item.rateTime
                  }}</span>
                </p>
                <p>
                  <span><van-rate v-model="item.score" readonly /></span>
                  <span class="card-container-right-score">{{
                    item.deliveryTime
                  }}</span
                  >分送达
                </p>
                <p class="card-container-right-evaluate">
                  {{ item.text }}
                </p>
                <div class="card-container-right-like">
                  <div>
                    <span
                      ><van-icon name="good-job-o" class="good-job-o"
                    /></span>
                  </div>
                  <div class="like-all-kinds">
                    <span
                      class="like-kinds"
                      v-for="recommend in item.recommend"
                      :key="recommend"
                    >
                      {{ recommend }}
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </van-tab>
          <van-tab :title="'差评'+badEvaluat.length">
            <div
              class="card-container"
              v-for="(item,index) in badEvaluat"
              :key="index"
            >
              <div class="card-container-left">
                <img :src="item.avatar" alt="" />
              </div>
              <div class="card-container-right">
                <p class="card-container-right-first">
                  <span class="card-container-right-name">{{
                    item.username
                  }}</span>
                  <span class="card-container-right-time">{{
                    item.rateTime
                  }}</span>
                </p>
                <p>
                  <span><van-rate v-model="item.score" readonly /></span>
                  <span class="card-container-right-score">{{
                    item.deliveryTime
                  }}</span
                  >分送达
                </p>
                <p class="card-container-right-evaluate">
                  {{ item.text }}
                </p>
                <div class="card-container-right-like">
                  <div>
                    <span
                      ><van-icon name="good-job-o" class="good-job-o"
                    /></span>
                  </div>
                  <div class="like-all-kinds">
                    <span
                      class="like-kinds"
                      v-for="recommend in item.recommend"
                      :key="recommend"
                    >
                      {{ recommend }}
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { $_shopRatings } from "../../api/info";
import dayjs from "dayjs";

interface IgoodAll {
  avatar: string; //头像
  deliveryTime: number; //配送时间
  rateTime: any; //下单时间
  rateType: number; //下单类型
  recommend: Array<object>; //评价
  score: number; //评分
  text: string; //评价文本
  username: string; //用户名
}
@Component
export default class Evaluat extends Vue {
  value: number = 2; //评分
  evaluatInfo: Array<IgoodAll> = []; //全部评价
  pic: string = ""; //头像
  goodEvaluat: Array<object> = [{}]; //好评
  badEvaluat: Array<object> = [{}]; //差评
  //方法
  //获取评论信息
  async getEvaluat(): Promise<void> {
    let res = await $_shopRatings();
    // console.log(res.data);
    // this.evaluatInfo.rateTime
    this.evaluatInfo= res.data.map((v: any, i: number) => {
      v.rateTime= dayjs(v.rateTime).format("YYYY-MM-DD HH:mm:ss");//先把要处理的数据处理好了.在赋给里面的值后再返还整个里面遍历的对象
       return v
    });
    // console.log(this.evaluatInfo);
    // dayjs(1318781876406).format('YYYY-MM-DD HH:mm:ss');
    // console.log(this.evaluatInfo);
    
    //好评
    let goodEvaluat = this.evaluatInfo.filter((v: any) => {
      return v.rateType == 0;
    });
    // console.log(goodEvaluat);
    this.goodEvaluat = goodEvaluat;
    //差评
    let badEvaluat = this.evaluatInfo.filter((v: any) => {
      return v.rateType == 1;
    });
    // console.log(badEvaluat);
    this.badEvaluat = badEvaluat;

    // console.log(this.evaluatInfo);
  }
  //生命周期
  created() {
    //调用获取评论信息
    this.getEvaluat();
  }
}
</script>

<style lang="scss" scoped>
$active: rgb(178, 13, 31);
.evaluat-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: rgb(244, 245, 247);
  .evaluat-container-top {
    width: 100%;
    height: 120px;
    background-color: #fff;
    margin-bottom: 20px;
    display: flex;
    padding: 18px;
    .evaluat-container-top-left {
      flex: 1;
      text-align: center;
      border-right: 1px solid #ccc;
      h2 {
        color: $active;
        font-size: 20px;
      }
      p {
        color: #000;
        font-size: 14px;
        margin: 10px 0;
      }
      span {
        color: rgb(174, 174, 174);
      }
    }
    .evaluat-container-top-right {
      flex: 2;
      padding: 0 10px;
      font-size: 14px;
      .evaluat-container-top-right-margin {
        margin: 10px 0;
      }
    }
  }

  .evaluat-container-botton {
    flex: 1;
    width: 100%;
    background-color: #fff;
    padding: 10px;
    overflow: scroll;
    .evaluat-container-all {
      padding-bottom: 5px;
      .card-container {
        border-bottom: 1px solid #ccc;
        width: 100%;
        padding: 15px 12px;
        display: flex;
        .card-container-left {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          margin-right: 10px;
          img {
            width: 60px;
            height: 60px;
            border-radius: 50%;
          }
        }
        .card-container-right {
          text-align: left;
          flex: 1;
          color: rgb(182, 182, 182);
          p {
            margin: 6px 0;
          }
          .card-container-right-like {
            display: flex;
            // height: 100px;
            .good-job-o {
              font-size: 20px;
              color: $active;
              width: 24px;
            }
            .like-all-kinds {
              flex: 1;
              display: flex;
              width: 80px;
              flex-wrap: wrap;
              .like-kinds {
                border: 1px solid #ccc;
                padding: 2px;
                margin-left: 6px;
                margin: 5px;
              }
            }
          }
          .card-container-right-evaluate {
            color: #000 !important;
            font-size: 16px;
          }
          .card-container-right-first {
            display: flex;
            justify-content: space-between;
            .card-container-right-name {
              color: #000;
              font-weight: bold;
            }
            .card-container-right-time {
              text-align: right;
            }
          }
        }
      }
      .van-tabs__nav--card {
        margin: 0 !important;
      }
    }

    .van-tab__pane {
      padding: 10px 0;
      // color: rgb(165, 73, 73);
    }
  }
}
</style>